import React, { useState } from "react";
import { Timeline } from "@xzdarcy/react-timeline-editor";
import { cloneDeep } from "lodash";
import { mockData, mockEffect } from "./mock";

const TimelineEditor = () => {
  const defaultEditorData = cloneDeep(mockData);

  const [data, setData] = useState(defaultEditorData);

  return (
    <Timeline
      onChange={setData}
      editorData={data}
      effects={mockEffect}
      hideCursor={false}
      autoScroll={true}
      style={{ width: "100%", height: 100 }}
    />
  );
};

export default TimelineEditor;
